<!--
1）定位的特殊特性
    - [绝对]定位、[固定]定位与浮动float类似，会将元素转为近似【行内块】类型的元素
        行内元素--》行内块元素：设置宽度、高度会起作用
        块级元素--》行内块元素：不设置宽/高时，默认宽/高度由父容器宽/高度变为内容自身宽/高度
2）脱标的盒子不会触发外边距塌陷
    - 垂直方向的外边距
    - 浮动float元素、绝对定位、固定定位的元素不会触发外边距合并的问题
3）关于文字、图片
    浮动float元素只会压着下面的盒子，不会压着下面盒子里的文字或图片，
    因为float的初衷就是做文字环绕浮动元素的；
    而绝对、固定定位会压着所有内容，包括盒子、盒子里的文字和图片。
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    span {
        /* ------------ */
        position: absolute;
        /* ------------ */
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    div {
        /* ------------ */
        position: fixed;
        top: 300px;
        /* ------------ */
        background-color: cyan;
    }
</style>

<span>行内元素</span>
<div>块级元素</div>